<template>
	<view class="content">
		<StatusBar bgColor="bg-white"></StatusBar>

		<!--  订单搜索的开始 -->
		<view class="search-box " :style="[{height:StatusBar.height+'px'}]">
			<text class="cuIcon-back backicon clickEffict" @click="back"></text>
			<view class="input-search-box1">
				<input class="inputSearch1" type="text" value="" placeholder="搜索订单" v-model="searchOrder" />
				<text class="cuIcon-search iconsousuo" @click="search"></text>
			</view>

		</view>

		<!--  订单搜索的结束 -->



		<!-- 选择订单类型tap框开始 -->
		<view class="order-tap" :style="[{height:StatusBar.height+'px'}]">
			<scroll-view class="orderType-box" :scroll-y="false" :scroll-x="true">

				<view class="orderType-box1">
					<view class='ordertype ' v-for="(tab,index) in ordertype" @click="changeOrder(index)">

						<text :class="ordertype_index==index?'order-tap-select':'order-tab-no'"> {{tab.name}}</text>
						<view class="orderline animation-slide-left" v-show="ordertype_index==index">

						</view>

					</view>

				</view>

			</scroll-view>

		</view>

		<!-- 选择订单类型tap框结束 -->


		<!-- 订单列表开始 -->
		<view class="orderList" :style="{height: swiperHeight+'px'}">
			<mescroll-uni :fixed="false" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback"
				@init="mescrollInit">
				<!-- 	订单类型列表外卖 -->
				<view class="order-item-box animation-slide-bottom" v-for="(order,index) in list"
					:style="[{animationDelay: (index + 1)*0.1 + 's'}]"
					@click="orderinfo(order.order_id,order.typeCode)">

					<view class="orderStyle">
						<view class="order-item-box-header ">
							<view class="order-icon1">
								<image :src="domain+iconArr[order.typeCode]" mode="heightFix"></image>
							</view>
							<view class="order-name">{{order.server_name}}</view>

							<view class="">
								<text class="order-status" v-if="order.order_status === 0 ">{{order.pay_status==1?typeCode[order.typeCode][order.order_status] || "待处理":'待支付'}}</text>
								<text v-else-if="order.order_status == 1 " class="blue-color order-status">{{typeCode[order.typeCode][order.order_status] || "处理中"}}</text>
								<text v-else-if="order.order_status == 2 " class="blue-color order-status">{{typeCode[order.typeCode][order.order_status] || "进行中"}}</text>
								<text v-else-if="order.order_status == 4 " class="blue-color order-status">已完成</text>
								<text v-else-if="order.order_status == 5 " class="blue-color order-status">商家拒绝</text>
								<text v-else-if="order.order_status == 6 " class="blue-color order-status">退款处理中</text>
								<text class="order-status" v-else-if="order.order_status == 3 ">已取消</text>
								<text class="order-status" v-else>
									{{order.pay_status==1?'已支付':'未支付'}}
									
								</text>
							</view>

						</view>
						<view class="order-item-box-bodty ">
							<view class="order-item-box-bodty-img">
								<image :src="order.logo" mode="aspectFill" @error="errorImg(index)"></image>
							</view>

							<view class="order-item-box-bodty-box">
								<view class="order-info-item">
									<text>订单编号：{{order.order_sn}}</text>
								</view>
								<view class="order-info-item">
									<text>下单时间：{{order.created_at || '--'}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

			</mescroll-uni>
		</view>
		<!-- 订单列表结束 -->


	</view>

</template>

<script>
	import MescrollUni from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue"
	let params = {
		order_id: ['order_id'],
		server_name: ['server_name', 'shop_name'],
		order_status: ['order_status'],
		order_sn: ['order_sn'],
		created_at: ['created_at'],
		typeCode: ['typeCode'],
		logo: ['logo', 'icon'],
		pay_status:['pay_status'],
		typeCode:['typeCode']
		
	}
	export default {
		components: {
			MescrollUni
		},
		data() {
			return {
				title: "订单",
				domain: this.apiHost,
				StatusBar: this.Custom,
				searchOrder: '', //搜索的订单的值
				ordertype_index: 0,
				ordertype: [{
						name: "全部",
						type: "all"

					},
					{
						name: "待支付",
						type: "pay"

					},
					{
						name: "进行中",
						type: "delivery"

					},
					{
						name: "已完成",
						type: "complete"

					},
					{
						name: "已取消",
						type: "cancel"

					},

				],
				list: [],
				mescroll: null,
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 20 // 每页数据的数量,默认10
					},
					noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					textNoMore: '-- 没有更多了 --'
				},
				preList: [],
				orderList: [],
				iconArr: {
					TakeOut: "/static/images/icon/TakeOut_b.png",
					Deliver: "/static/images/icon/Deliver_b.png",
					BotWater: "/static/images/icon/BotWater_b.png",
					DormWarranty: "/static/images/icon/DormWarranty_b.png",
					ShopCenter: "/static/images/icon/Goods.png",
					Sport: "/static/images/icon/Sport.png"
				},
				swiperHeight: '',
				menu: [],
				typeCode:{
					"TakeOut":{2:"配送中",1:"商家出餐中",0:"待商家确认"}
				}
			}


		},
		watch: {
			searchOrder: function(val) {
				this.pipei(this.searchOrder);
			}
		},
		mounted() {
			this.menu = uni.getStorageSync("menu");
			this.getInfo().then((e) => {
				this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height * 2) - 20;
			});
		},
	
		methods: {
			/**
			 * 转换json为数组
			 */
			parseArr(parse) {
				return JSON.parse(parse);

			},
			errorImg(index) { //图片加载失败给出默认图

				this.list[index].shop.logo = "/static/img/error.png";

			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			upCallback(mescroll) {
				this.apiRequest('/buyer/AllOrderList', {
					area_id: uni.getStorageSync('area_id'),
					order_status: this.ordertype[this.ordertype_index].type,
					page: mescroll.num,
					limit: mescroll.size,
					orderType: ""
				}, 0).then(res => {
					if (res.code == 200) {
						if (mescroll.num == 1) {
							this.list = []
						}
						console.log(res.data.data[0])
						this.analysis(res.data.data, (dat) => {
							this.list = this.list.concat(dat) //追加新数据
							console.log("list",this.list[0]);
							this.preList = this.list;
							mescroll.endByPage(this.list.length, res.data.totalPage);
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: '请求失败'
						})
						mescroll.endSuccess()
					}
				}, err => {
					console.log(err)
				})

			},
			analysis(res, callback) {
				let dat = [];
				res.forEach((item) => {
					let arr = new Map(),
						setArr = [];
					for (let i in params) {
						let x = params[i].filter((val) => {
							let is = Object.keys(item).includes(val);
							(!is) ? (() => {
								let t = Object.values(item).filter(v => {
									return (v !== null && typeof v === 'object') ? true :
										false;
								});
								if (t[0]) {
									t.forEach(j => {
										is = Object.keys(j).includes(val);
										return is;
									});
								}
							})() : "";
							return is;
						});
					
						if (x[0]) {
							let val = item[x[0]];	
							(typeof val =="undefined" ) ? (() => {
								let t = Object.values(item).filter(v => {
									return (v !== null && typeof v === 'object') ? true : false;
								});
								if (t[0]) {
									t.forEach(j => {
										let is = Object.keys(j).includes(x[0]);
										arr.set(i, j[x[0]])
										return is;
									});
								}
							})() : arr.set(i, item[x[0]]);

							setArr = Object.fromEntries(arr.entries());
						}
					}
					dat.push(setArr);
				})
				callback(dat);
			},

			orderinfo(id, type) {
				let path = "";
				switch (type) {
					case "TakeOut":
						path = '/app/TakeOut/pages/order/orderInfo?order_id=' + id;
						break;
					case "DormWarranty":
						path = "/app/DormWarranty/pages/orderInfo?order_id=" + id;
						break;
					case "ShopCenter":
						path = "/app/ShopCenter/pages/orderInfo?order_id=" + id;
						break;
					case "Sport":
						path = "/app/gym/orderInfo?order_id=" + id;
						break;
					default:
						path = '/app/TakeOut/pages/order/orderInfo?order_id=' + id;
						break;

				}
				uni.navigateTo({
					url: path,
				});
			},

			back() {
				uni.navigateBack({
					delta: 1,
				})
			},
			/**
			 * 搜索订单
			 */
			search() {
				if (this.searchOrder.length == 0) {
					uni.showToast({
						title: "请输入需要查询的订单",
						icon: "none"
					})
					return
				}

				this.pipei(this.searchOrder);

			},
			/**
			 * 选中订单类型
			 */
			changeOrder(type) {
				this.ordertype_index = type;
				this.mescroll.triggerDownScroll();

			},
			//搜索匹配
			pipei(data) {
				let arr = [];
				arr = this.preList.filter((item) => {
					let k = false,
						val;

					let array = {
						index: ['address', 'mobile', 'order_id', 'order_sn']

					};
					for (let i in array.index) {
						let key = array.index[i];
						val = new String(item[key]);
						if (val.includes(data)) {
							k = true;
							break;
						}
					}
					if (!k) {
						for (let i in array.shop) {
							let key = array.shop[i];
							val = new String(item.shop[key]);
							if (val.includes(data)) {
								k = true;
								break;
							}
						}
					}
					if (!k) {
						for (let i in array.order_goods) {
							let key = array.order_goods[i];
							let arr = item.order_goods;
							for (let l in arr) {
								val = arr[l][key];
								if (val.includes(data)) {
									k = true;
									break;
								}
							}
							if (k) {
								break;
							}

						}
					}
					return k;
				})
				this.list = arr;

			}




		}




	}
</script>

<style scoped>
	.content {
		overflow: hidden;
	}

	.search-box {
		width: 100vw;
		display: flex;
		flex-direction: row;
		background: #FFFFFF;
		align-items: center;
	}

	.input-search-box1 {
		width: 60%;
		height: 100%;
		display: flex;
		align-items: center;
		background: #F7F7F7;
		border-radius: 20px;
		position: relative;
	}

	.orderType-box {
		width: 100%;
		height: 100upx;
		background: #FFFFFF;

	}

	.orderType-box1 {
		width: 100%;
		height: 100%;
		display: -webkit-box;
		flex-direction: row;
	}

	.inputSearch1 {
		width: 80%;
		height: 100%;
		padding-left: 5%;
		background: #F7F7F7;
		border-radius: 20px;

	}

	.iconsousuo {
		color: #FF999999;
		font-size: 45upx;
		position: absolute;
		float: right;
		right: 2%;
	}

	.ordertype {
		margin-top: 30upx;
		width: 130upx;
		height: 60upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.order-tap {
		width: 100vw;
		background-color: #FFFFFFFF;
	}

	.order-tap-select {
		font-size: 28upx;
		font-weight: 800;
		color: #333333;
	}

	.order-tab-no {
		font-size: 28upx;
		font-weight: 500;
		color: #999999;
	}

	.orderline {
		width: 30%;
		height: 6upx;
		background: #1270E0;
		border-radius: 30%;
		margin-top: 4upx;
	}

	.orderList {
		width: 94%;
		margin-top: 40upx;
		margin-left: 3%;
		height: 75%;
		position: relative;
	}

	.orderStyle {
		width: 100%;
		height: 270upx;
		flex-direction: column;
		display: flex;
		padding: 20rpx;
		justify-content: center;
	}

	.order-item-box {
		width: 100%;
		min-height: calc(100vw*(260/750));
		flex-direction: column;
		display: flex;
		justify-content: center;
		background: #FFFFFF;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		margin-top: 20upx;
	}

	.order-item-box-header {
		width: 100%;
		display: flex;
		flex-direction: row;
		position: relative;
		align-items: center;
	}

	.order-icon1 {
		border-radius: 10upx;
		width: calc(100vw*(50/750));
		height: calc(100vw*(50/750));
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		
	}

	.order-icon1 image {
		width: 100%;
		height: 100%;
		border-radius: 10upx;
	}

	.order-icon2 {
		width: 100%;
		position: relative;
	}

	.order-name {
		max-width: 70%;
		display: block;
		align-items: center;
		justify-content: start;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		margin-left: 2%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.order-status {
		width: 20%;
		height: 100%;
		font-size: calc(100vw*(24/750));
		display: flex;
		align-items: center;
		font-family: PingFang SC;
		font-weight: 500;
		position: absolute;
		float: right;
		right: 0;
		top: 0;
		font-weight: 800;
		justify-content: flex-end;
	}

	.order-item-box-bodty {
		width: 100%;
		margin-top: calc(100vw*(40/750));
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.order-item-box-bodty-img {
		width: calc(100vw*(100/750));
		height: calc(100vw*(100/750));
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 10upx;
	}

	.order-item-box-bodty-img image {
		width: 100%;
		height: 100%;
		border-radius: 10upx;
	}

	.order-item-box-bodty-box {
		width: 76%;
		min-height: calc(100vw*(100/750));
		display: flex;
		margin-left: calc(100vw*(19/750));
		flex-direction: column;
		justify-content: space-evenly;

	}

	.order-info-item {
		width: 98%;
		height: 33%;
		display: flex;
		align-items: center;
		font-size: calc(100vw*(20/750));
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;


	}
</style>
